import './index.scss'
import { microCreateMinis } from '../../minis'
import draggable from 'vuedraggable'
export default {
  name: 'micro-service-box',
  mixins: [microCreateMinis],
  props: {},
  data() {
    return {
      tabActive: '0',
      formData: {
        checkedIcon: 'el-icon-chat-dot-round', //图标
        content:'在线咨询',
        tColor: '#FFFFFF',
        bgColor: '#464646',
        marginTop: '15',
        marginBottom: '15',
      },
      iconsIndex:0,
      isGetChooseFeature: false, // 是否可以返回微页面
      dialogChoosePages: false, // 微页面弹窗
      checkedLinkIndex: 0,
      activeIcon: 0,
      iconArr: ['el-icon-chat-dot-round','el-icon-bell','el-icon-truck'],
      commonCheckFieldRules: 'checkData', // 当前组件默认的规则判断函数
      mySelfCheckRules: 'mySelfCheckFun', // 我自己的验证规则函数  比如弹窗之类的
    }
  },
  watch: {},
  components: {
    chooseFeature: () => import('@/components/choose-feature/index.vue'),
    draggable
  },
  computed: {
  },
  mounted() {
    console.log(this.formData.textColor)
  },
  methods: {
    // 重置颜色
    resetBoderColor(type) {
      if (type === 1) {
        this.formData.tColor = '#FFFFFF'
      } else if (type === 2) {
        this.formData.bgColor = '#464646'
      }
    },
    checkedIcons(index){
      this.iconsIndex = index
      this.formData.checkedIcon = this.iconArr[index]
    },
    checkedIcon(iconText,index) {
      this.formData.noticeList[index].checkedIcon = iconText;
    },
    deleteNotice(index) {
      this.formData.noticeList.splice(index,1);
    },
    checkedLink(index) {
      this.checkedLinkIndex = index;
      this.dialogChoosePages = true
    },
    // 选择微页面回调
    chooseChooseFeaturesFun($event) {
      const microTitle = $event.data.type === 0 && '系统页面' || $event.data.type === 1 && '功能页面' || $event.data.type === 2 && '商品详情'
      let obj = {
        routerId: $event.data.id,
        type: $event.data.type,
        title: $event.data.title,
        link: $event.data.path,
        microTitle: microTitle
      }
      Object.assign(this.formData, obj);
      this.dialogChoosePages = false
    },
     /**
     * 开始验证
     * */
    checkData() {
      this.myCheckResult((this.formData.content !== ''))
    },
    /** 弹窗*/
    mySelfCheckFun() { // 可以选择调用默认规则判断
      this.showCheckForm()
    }
  }
}
